<template>
    <el-dialog title="课程开通" v-model="visible" :width="1200" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="120px"
            label-position="right" v-loading.fullscreen="loading">
            <el-form-item label="用户:">
                <div>{{ user.name }}</div>
            </el-form-item>
            <el-form-item label="课程：" prop="selected">
                <div class="panel-search-box" style="padding: 0px;">
                    <div class="panel-search">
                        <el-input v-model="search.name" placeholder="课程名称" clearable class="w165"></el-input>
                        <el-select v-model="search.categoryId" placeholder="类型" clearable filterable class="w165">
						    <el-option :label="item.name" :value="item.id" v-for="(item,index) in categoryData" :key="index"></el-option>
					    </el-select>
                        <el-select v-model="search.levelId" placeholder="学段" clearable filterable class="w165">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in levelData" :key="index"></el-option>
                        </el-select>
                        <el-select v-model="search.difficultyId" placeholder="难度" clearable filterable class="w165">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in difficultyData" :key="index"></el-option>
                        </el-select>
                        <el-select v-model="search.bookId" placeholder="教材" clearable filterable class="w165">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in bookData" :key="index"></el-option>
                        </el-select>
                        <el-select v-model="search.isTrial" placeholder="体验课" clearable>
                            <el-option label="是" :value="1"></el-option>
                            <el-option label="否" :value="0"></el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    </div>
                </div>
                <scDialogTable ref="courseTable" :params="search" :apiObj="$API.course.list"  stripe style="border-top: 0px;" :height="500" @handleSelectionChange="handleSelectionChange" :rowKey="getRowKeys">
                    <el-table-column type="selection" width="55" :reserve-selection="true" />
                    <el-table-column prop="name" label="课程名称" align="left"></el-table-column>
                    <el-table-column label="类型" prop="category" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.category  ? scope.row.category.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="学段" prop="level" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.level  ? scope.row.level.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="难度" prop="difficulty" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.difficulty  ? scope.row.difficulty.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="教材" prop="book" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.book  ? scope.row.book.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="词汇数量" prop="words" width="120" align="center">
                    </el-table-column>
                    <el-table-column label="体验课" prop="isTrial" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.isTrial ? scope.row.isTrial.name : ''}}
                        </template>
                    </el-table-column>
                </scDialogTable>
            </el-form-item> 
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">开 通</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    emits: ['success', 'closed'],
    data() {
        return {
            visible: false,
            loading: false,
            isSaveing: false,
            user: {},
            courseIds: [],
            form: {
                selected: []
            },
            rules: {
                selected: [
                    { required: true, message: '请选择开通的课程', trigger: 'blur' },
                ],
            },
            selected: [],
            search: {
                status: 1,
                userId: null,
                isOpen: null,
            },
            categoryData: [],
            levelData: [],
            difficultyData: [],
            bookData: [],
        }
    },
    mounted() {
        this.getAllCategory()
        this.getAllLevel()
        this.getAllDifficulty()
        this.getAllBook()
    },
    methods: {
        //显示
        open(user) {
            this.selected = []
            this.visible = true
            this.user = user
            if (this.user) {
                this.search.userId = user.id
                this.search.isOpen = 0
                this.upsearch()
            }
            return this
        },
        getRowKeys(row) {
            return row.id
        },
        // 搜索
		upsearch() {
            if (this.$refs.courseTable) {
                this.$refs.courseTable.upData(this.search)
            }
		},
        getAllCategory() {
            this.$API.course.category.all.get().then(res => {
                this.categoryData = res.data
            })
        },
        getAllLevel() {
            this.$API.course.level.all.get().then(res => {
                this.levelData = res.data
            })
        },
        getAllDifficulty() {
            this.$API.course.difficulty.all.get().then(res => {
                this.difficultyData = res.data
            })
        },
        getAllBook() {
            this.$API.course.book.all.get().then(res => {
                this.bookData = res.data
            })
        },
        //表单提交方法
        async submit() {
            if (this.form.selected.length < 1) {
                this.$notify.error('请选择开通的课程')
                return false
            }


            let _form = {
                userId: this.user.id, 
                courseIds: []
            }
            this.form.selected.forEach(item => {
                _form.courseIds.push(item)
            })

            try {
                this.isSaveing = true;
                await this.$API.user.course.addBatch.post( _form)
                this.visible = false
                this.$emit('success')
                this.$notify.success("操作成功")
            } finally {
                this.isSaveing = false;
            }
        },
        changeSelect(ids) {
            this.$forceUpdate()
            let newList = []
            ids.map(id => {
                let exist = this.coursewareItems.find(item => {
                    return id == item.id
                })
                exist && newList.push(exist)
            })

            let result = []
            newList.forEach(item => {
                let exist = this.selected.find(row => {
                    return row.id == item.id
                })

                if (exist) {
                    result.push(exist)
                } else {
                    result.push({ id: item.id, name: item.name, time: [] })
                }
            })

            this.selected = result
        },
        handleSelectionChange(row) {
            this.form.selected = []
            row.forEach(ele=>{
                this.form.selected.push(ele.id)
            })
        },
    }
}
</script>

<style scoped>
.panel-sFlex {
	display: flex;
	overflow: hidden;
    margin-left: 0px;
}
.w165 {
	width:165px;
}
</style>
